<template>
  <div>
    <el-scrollbar>
      <el-menu
        style="height: 100vh"
        active-text-color="#ffd04b"
        background-color="#545c64"
        class="el-menu-vertical-demo"
        default-active="2"
        text-color="#fff"
        :collapse="menuStore.isCollapse"
      >
        <div class="logo" :class="{ collapse: menuStore.isCollapse }">
          <img src="../assets/images/logo.png" alt="logo" />
          <!-- //折叠的时候这个标题不显示 -->
          <h5 v-if="!menuStore.isCollapse">后台管理系统</h5>
        </div>
        <!-- 一级菜单的遍历,无子菜单 -->
        <template v-for="item in menuStore.menuList" :key="item.path">
          <el-menu-item :index="item.path" v-if="!item.children || item.children.length === 0">
            <template #title>
              <!-- 动态图标 -->
              <component :is="item.icon" class="icons" ></component>
              <span>{{ item.label }}</span>
            </template>
          </el-menu-item>
          <!-- 有子菜单 -->
         <!-- 但你已经有了 v-if="!item.children"，应该改为 v-else。 -->
          <el-sub-menu
            :index="item.path" v-else>
            <template #title>
              <component :is="item.icon" class="icons"></component>
              <span>{{ item.label }}</span>
            </template>
            <el-menu-item
              :index="subItem.path"
              v-for="subItem in item.children"
            >
              <template #title>
                <component :is="subItem.icon" class="icons" ></component>
                <span>{{ subItem.label }}</span>
              </template>
            </el-menu-item>
          </el-sub-menu>
        </template>
      </el-menu>
    </el-scrollbar>
  </div>
</template>

<script setup>
import { useCounterStore } from "../store";
import {ref} from 'vue'
const menuStore = useCounterStore();


</script>

<style lang="scss" scoped>
.el-menu {
  border-right: none;

  }
.logo {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
  img {
    width: 40px;
    height: 40px;
  }
  h5 {
    color: white;

    text-align: center;
    font-size: 19px;
  }
   &.collapse {
    h5 {
      display: none;
    }
  }
}
.icons{
  width: 20px;
  height: 20px;
}

</style>
